<template>
<el-tabs v-model='tabOneActive' tab-position="left">
    <el-tab-pane class="order_tabs-pane" v-for="(x,index) in tabsList" :key="x.id" :label="x.parameter" :name="x.parameter">
        <div slot="label">
            <div class="qipao" slot="content" v-if="EditCheckedData[x.parameter]">
                <span>{{getSelName(x.parameter,EditCheckedData[x.parameter])}}</span>
                <i></i>
            </div>
            <span>{{x.parameter}}</span>
        </div>
        <el-radio-group v-model="EditCheckedData[x.parameter]" @change="tabsOneRadioChange(index)">
            <div v-if="x.parameter == '服装款式'">
                <el-input v-model="search" class="input_search" placeholder="请输入款号进行搜索">
                    <el-button slot="append" icon="el-icon-search" @click="Search(x.parameter)"></el-button>
                </el-input>
            </div>
            <el-radio-button v-for="y in tabOneDataList[x.parameter]" :key="y.id" :label="y.id" :value="y.categoryName">
                <div><img :src="y.img" alt=""></div>
                <strong>{{y.categoryName}}</strong>
                <span v-if="myflag">$nbsp;</span>
            </el-radio-button>
        </el-radio-group>
    </el-tab-pane>
</el-tabs>
</template>

<script>
import Vue from 'vue'
export default {
    name: 'Tabs2',
    props:['switch'],
    data() {
        return{
            myflag:false,
            tabsList:[],
            tabOneDataList: {},//tabsOne内的单选组数据
            tabOneActive:'',//导航栏1状态激活
            search: '',//搜索
            EditCheckedData: this.$store.state.OrderUser.EditCheckedData['plbx']
        }
    },
    computed: {
        getChecked() {
            return this.$store.state.OrderUser.Order_user_Info_temp.id;
        }
    },
    mounted() {
        //掘弃目前的初始化默认第一帧方式，改制变量存储默认第一位
        //getcategory_id时，改为获取改制变量，拼接。
        //建立状态变量a
        this.tabsList.length > 0 ? '' : this.tabOpenBind();//a
    },
    methods: {
        async tabOpenBind() {
            let p1 = new FormData();
            p1.append('module_id',1);
            p1.append('category_id',0);
            await this.$http.post('logic/interface/query_mstemplateinfo',p1).then( async(result) => {
                this.tabsList = result.data.data;
                this.tabOneActive = this.tabsList[0].parameter;//初始化激活定位
                for(let item of this.tabsList) {
                    let p2 = new FormData();
                    p2.append('template_id',item.id);
                    if(item.id == 1) {
                        p2.append('category_ids',0);
                    }else {
                        p2.append('category_ids',this.$store.getters.getOrder_user_category_id('plbx'));
                    }
                    await this.$http.post('logic/interface/query_categoryinfo',p2).then(result => {
                        Vue.set(this.tabOneDataList,item.parameter,result.data.data)
                        //复位还是默认选中第一个
                        if(result.data.data.length > 0 && this.EditCheckedData[item.parameter] == undefined) {
                            Vue.set(this.EditCheckedData,item.parameter,result.data.data[0].id)
                        }
                    });
                }
            });
        },
        async tabsOneRadioChange(val) {
            this.myflag = true
            this.myflag = false
            //监听单选按钮组选中变化，适用于单选变化后，下级全部重新请求且做数组第一项默认
            let category_ids = '';
            for(let i=0;i<this.tabsList.length;i++) {
                if(val >= i) {
                    //存储靶向上级已经单选的id
                    category_ids += ',' + this.EditCheckedData[this.tabsList[i].parameter];
                }else {
                    //靶向下级重新请求数据
                    let p2 = new FormData();
                    p2.append('template_id',this.tabsList[i].id);
                    p2.append('category_ids',category_ids.substring(1,category_ids.length));
                    await this.$http.post('logic/interface/query_categoryinfo',p2).then(result => {
                        Vue.set(this.tabOneDataList,this.tabsList[i].parameter,result.data.data)
                        //默认选中第一个
                        if(result.data.data.length > 0) {
                            this.EditCheckedData[this.tabsList[i].parameter] = result.data.data[0].id;
                            category_ids += ',' + this.EditCheckedData[this.tabsList[i].parameter];
                            //更新store内Order_user_category_id存储记录
                            Vue.set(this.EditCheckedData,this.tabsList[i].parameter,result.data.data[0].id)
                        }else {
                            delete this.EditCheckedData[this.tabsList[i].parameter];
                        }
                    });
                }
            }
        },
        getSelName(tab,val) {
            if(!!this.tabOneDataList[tab]) {
                let result = this.tabOneDataList[tab].filter(item=> {
                    return item.id == val;
                });
                if(result.length > 0) {
                    return result[0].categoryName;
                }else {
                    return null;
                }
            }
        },
        Search(type) {
            let data = this.tabOneDataList[type].filter(item=> {
                return item.categoryName == this.search;
            });
            if(data.length > 0) {
                for(let x of this.tabsList) {
                    if(x.parameter == type) {
                        Vue.set(this.EditCheckedData,type,data[0].id)
                    }
                }
            }
        }
    },
    watch: {
        getChecked() {
            this.EditCheckedData = this.$store.state.OrderUser.EditCheckedData['plbx'];
            this.tabOpenBind();
        }
    },
}
</script>

<style scoped lang="scss">
/*tabs气泡样式*/
.qipao{ display: inline-block; margin-right: 15px; position: relative;}
.qipao span{color: #ffffff; background: #000000; padding:5px 10px; border-radius: 5px;}
.qipao i{font-size: 0; position: absolute; top: 18px;
line-height: 0;
border-width: 6px;
border-color: #000;
border-right-width: 0;
border-style: dashed;
border-left-style: solid;
border-top-color: transparent;
border-bottom-color: transparent;}

.el-tabs__active-bar{height: 50px!important;}
/*tabs气泡样式*/
</style>
